<!--
 * @Description: 底部第三个
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: liqi
 * @LastEditTime: 2022-09-07 19:16:59
-->
<template>
  <div ref="container" style="height: 95%"></div>
</template>

<script>
import { Line } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {
    loadChart() {
      fetch(
        "https://gw.alipayobjects.com/os/bmw-prod/e00d52f4-2fa6-47ee-a0d7-105dd95bde20.json"
      )
        .then((res) => res.json())
        .then((data) => {
          const linePlot = new Line(this.$refs["container"], {
            data,
            xField: "year",
            yField: "gdp",
            seriesField: "name",
            yAxis: {
              label: {
                formatter: (v) => `${(v / 10e8).toFixed(1)} B`,
              },
            },
            legend: {
              position: "top",
            },
            smooth: true,
            // @TODO 后续会换一种动画方式
            animation: {
              appear: {
                animation: "path-in",
                duration: 5000,
              },
            },
            tooltip: {
              domStyles: {
                "g2-tooltip": {
                  backgroundColor: "#03255f",
                  color: "#fff",
                },
              },
            },
          });

          linePlot.render();
        });
    },
  },
  created() {},
  mounted() {
    this.loadChart();
  },
};
</script>
<style scoped>
</style>